<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>京东-欢迎登录</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/login.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/login.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="js/vue-qriously.js"></script>
    <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <header>
            <div class="logo"><a href="index.html"></a></div>
            <b></b>
            <a href="#" class="questionnaire">
                登录页面，调查问卷
                <b></b>
            </a>
        </header>
        <div class="loginarea">
            <div class="tips-wrapper">
                <i></i>
                依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<span style="color: #333;">《京东隐私政策》</span>已上线，将更有利于保护您的个人隐私。
            </div>
            <div class="login-wrap">
                <div class="login-bg">

                    <div class="login_form">
                        <div class="login-tips">
                            <i></i>
                            京东不会以任何理由要求您转账汇款，谨防诈骗。
                        </div>
                        <ul class="login-tab">
                            <li class="login-tab-l current">
                                <a href="#">扫码登录</a>
                            </li>
                            <li class="login-tab-r">
                                <a href="#">手机登录</a>
                            </li>
                        </ul>
                        <div class="login-w">
                            <div class="mc">
                                <div class="login-ewm">
                                    <div id="wx-login"></div>
                                </div>
                                <ul style="margin-top: 50px;">
                                    <li><i></i><em>免输入</em></li>
                                    <li><i class="coagent-second"></i><em>更快</em></li>
                                    <li><i class="coagent-last"></i><em>更安全</em></li>
                                </ul>
                            </div>
                            <div class="mc">
                                <form>
                                    <div class="login_uname">
                                        <label for="uname"></label>
                                        <input type="text" v-model="userInfo.phone" name="" id="uname"
                                            placeholder="手机号">
                                    </div>
                                    <div class="login_password">
                                        <label for="password"></label>
                                        <input style="float: left;width:150px;" v-model="userInfo.code" type="text"
                                            name="" id="password" placeholder="验证码">
                                        <el-button style="height: 38px;float: left;width: 104px;" @click="getCodeFun">
                                            获取验证码
                                        </el-button>
                                    </div>
                                    <input type="button" @click='login' value="登录" class="over">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p class="links">
                <a href="#">关于我们 |</a>
                <a href="#">联系我们 |</a>
                <a href="#">人才招聘 |</a>
                <a href="#">商家入驻 |</a>
                <a href="#">广告服务 |</a>
                <a href="#">手机京东 |</a>
                <a href="#">友情链接 |</a>
                <a href="#">销售联盟 |</a>
                <a href="#">京东社区 |</a>
                <a href="#">京东公益 |</a>
                <a href="#">English Site |</a>
            </p>
            <p class="copyright">Copyright©2004-2019 京东JD.com 版权所有</p>
        </div>
    </div>
</body>

</html>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                userInfo: {
                    phone: "",
                    code: "",
                    openid: "",
                },

                name: "", // 用户登录显示的名称

            };
        },
        created() {
            this.showInfo();
        },
        mounted() {
            this.weixinLogin();
            // 注册全局登录事件对象
            window.loginEvent = new Vue();
            // 监听登录事件
            loginEvent.$on('loginDialogEvent', function () {
                window.location.href = 'login.html';
            })
            // 触发事件，显示登录层：loginEvent.$emit('loginDialogEvent')

            //初始化微信js
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
            document.body.appendChild(script)

            // 微信登录回调处理
            window["loginCallback"] = (name, token) => {
                this.loginCallback(name, token);
            }

        },
        methods: {
            showInfo() {
                let token = this.getCookie("token");
                if (token) {
                    this.name = this.getCookie("name");
                }
            },
            // 获取验证码
            getCodeFun() {
                if (!/^1[34578]\d{9}$/.test(this.userInfo.phone)) {
                    this.$message.error("手机号码不正确");
                    return;
                }

                // 发送短信验证码
                axios.get(`http://localhost/api/msm/send/${this.userInfo.phone}`)
                    .then((response) => {
                        alert("发送成功")
                    })
                    .catch((e) => {
                        this.$message.error("发送失败，重新发送");
                    });
            },
            // 登录
            login() {
                if (this.userInfo.code.length == 0 || this.userInfo.code == '') {
                    this.$message.error("请输入验证码");
                    return;
                }
                axios.post(`http://localhost/api/user/login`, this.userInfo)
                    .then((response) => {
                        // 登录成功 设置cookie
                        this.setCookie("name", response.data.data.name);
                        this.setCookie("token", response.data.data.token);
                        window.location.href = "index.html";
                    })
            },
            weixinLogin() {
                axios.get(`http://localhost/api/ucenter/wx/getLoginParam`)
                    .then(response => {
                        var obj = new WxLogin({
                            self_redirect: true,
                            id: 'wx-login', // 需要显示的容器id
                            appid: response.data.data.appid, // 公众号appid wx*******
                            scope: response.data.data.scope, // 网页默认即可
                            redirect_uri: response.data.data.redirect_uri, // 授权成功后回调的url
                            state: response.data.data.state, // 可设置为简单的随机数加session用来校验
                            style: 'black', // 提供"black"、"white"可选。二维码的样式
                            href: 'https://jdsc.mynatapp.cc/css/wx.css' // 外部css文件url，需要https
                        })
                    })
            },
            getCookie(name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    return unescape(arr[2]);

                } else {
                    return null;
                }
            },
            setCookie(name, value) {
                document.cookie = name + "=" + value;
            },
        }
    })
</script>
<style>

</style>